<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div id="app">
      <p v-for="(ined) in shuzu">{{ined}}</p>
      <button @click="txt">切换</button>
    </div>
    <script src="../vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        //定义属性
        data: {
          shuzu: ["帅哥", "美女", "程序猿"],
        },
        //定义方法
        methods: {
          txt() {
            /*
            1.先取出第一个元素
            2.使用slice(1)获取除第一个元素之外的数组部分
            3.使用concat方法将第一个元素添加到新数组的末尾
            */
            let firs = this.shuzu[0];
            this.shuzu = this.shuzu.slice(1).concat(firs);
          },
        },
      });
    </script>
  </body>
</html>
